// 考试
<template>
  <div class="test">
    <div class="center">
      <div class="Bigtitle">XX考试</div>
      <div class="content">
        <div class="left">
          <div class="first">
            <p>单选题</p>
            <div>
              <div class="con" v-for="(item, index) in list" :key="index">
                <p>第{{ index + 1 }}题 {{ item.titles }}</p>
                <div class="radio">
                  <el-radio
                    v-model="item.title"
                    v-for="(items, indexs) in item.lists"
                    :key="indexs"
                    :label="items.i"
                    @change="changeInput()"
                    >{{ order[indexs] }}.{{ items.radio
                    }}<img :src="items.image"
                  /></el-radio>
                </div>
              </div>
            </div>
          </div>
          <div class="two">
            <p>简答题</p>
            <div>
              <div class="con">
                <p>{{ brief.p1 }}</p>
                <p>{{ brief.p2 }}</p>
                <p><img :src="brief.p3" alt="" /></p>
                <p>{{ brief.p4 }}</p>
                <p>{{ brief.p5 }}</p>
                <p>{{ brief.p6 }}</p>
                <p>{{ brief.p7 }}</p>
                <p>{{ brief.p8 }}</p>
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请考生在此处作答"
                  v-model="textarea"
                >
                </el-input>
              </div>
            </div>
          </div>
          <div class="three">
            <p>填空题</p>
            <div>
              <div class="con">
                <p>{{ empty.p1 }}</p>
                <p>{{ empty.p2 }}</p>
                <p>{{ empty.p3 }}</p>
                <p>{{ empty.p4 }}</p>
                <p>{{ empty.p5 }}</p>
                <p>{{ empty.p6 }}</p>
                <el-form ref="form" :model="form">
                  <el-form-item>
                    <span>1.</span><el-input v-model="form.one"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <span>2.</span><el-input v-model="form.two"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <span>3.</span><el-input v-model="form.three"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <span>4.</span><el-input v-model="form.four"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <span>5.</span><el-input v-model="form.five"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <span>6.</span><el-input v-model="form.six"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="four">
            <p>简答题</p>
            <div>
              <div class="con">
                <div>
                  <p>{{ easy.p1 }}</p>
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :auto-upload="false"
                  >
                    <el-button slot="trigger" size="small" type="primary"
                      >选取文件</el-button
                    >
                    <span slot="tip" class="el-upload__tip">
                      （请以压缩包的形式上传）
                    </span>
                  </el-upload>
                </div>
                <div>
                  <p>{{ easy.p2 }}</p>
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :auto-upload="false"
                  >
                    <el-button slot="trigger" size="small" type="primary"
                      >选取文件</el-button
                    >
                    <span slot="tip" class="el-upload__tip">
                      （请以压缩包的形式上传）
                    </span>
                  </el-upload>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="right"
          :class="[{ ture: tabshow }, { turetwo: tabshowtwo }]"
        >
          <div class="time">
            <p><span>剩余时间</span> {{ ` ${min} : ${sec}` }}</p>
          </div>
          <p class="progress">
            答题进度：<span>{{ branch }}/{{ total }}</span>
          </p>
          <div class="mu">
            <p>单项选择题</p>
            <ul class="sole">
              <li
                v-for="(item, index) in list"
                :key="index"
                :class="item.title != null ? 'back' : ''"
                @click="toTegional(index)"
              >
                {{ index + 1 }}
              </li>
            </ul>
          </div>
          <div class="style">
            <div>
              <div class="bule"></div>
              正确
            </div>
            <div>
              <div class="gref"></div>
              未答
            </div>
          </div>

          <el-button v-show="!isshow1" @click="open" round type="danger"
            >交卷</el-button
          >
          <el-button v-show="isshow1" class="last">交卷</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 需引入elementUI配合提示，或者自行制作
export default {
  data() {
    return {
      textarea: "",
      isshow1: true,
      time: "",
      min: "120",
      sec: "00",
      branch: " ",
      total: "",
      order: ["A", "B", "C", "D", "E", "F"],
      list: [
        {
          // title:'0',
          titles:
            "（） 是指两个或两个以上当事人按照商定条件，在约定时间内交换一系列现金的合约。",
          lists: [
            {
              i: "0",
              radio: "期货",
            },
            {
              i: "1",
              radio: "期货",
            },
            {
              i: "2",
              radio: "期货",
            },
            {
              i: "3",
              radio: "期货",
            },
          ],
        },
        {
          // title:'1',
          titles:
            "（）是指两个或两个以上当事人按照商定条件，在约定时间内交换一系列现金的合约。",
          lists: [
            {
              i: "0",
              radio: "期货",
              image: require("../../assets/ti.png"),
            },
            {
              i: "1",
              radio: "期货",
              image: require("../../assets/ti.png"),
            },
            {
              i: "2",
              radio: "期货",
              image: require("../../assets/ti.png"),
            },
            {
              i: "3",
              radio: "期货",
              image: require("../../assets/ti.png"),
            },
          ],
        },
      ],
      brief: {
        p1: "背景资料:",
        p2:
          "某施工单位承建了一段二级公路的路基工程，路基宽度12m，其中K1+600~K3+050为填方路堤，路段填方需从取土场借方:K1+600~K2+300填方平均高度为1.6m，设计填方数量16200m3;K2+300~K3+050填方平均高度为2.1m，设计填方数量24000m3。施工单位在工程项目开工之前，对施工图设计文件进行了复查和现场核对，补充了必要现场调查资料，发现该路段原地面下有50cm厚淤泥，设计文件中未进行处理，施工单位在施工图会审中提出处理意见后，经监理工程师和设计代表同意，按路堤坡脚每侧扩宽1m采用抛石挤淤的方法进行处理，抛石方量14193m3，要求采用粒径较大的未风化石料进行抛填。施工单位根据现场情况，确定了取土场位置，并拟定了新的施工便道A、B两个方案，施工便道A方案长度1420m,施工便道B方案长度1310m，最终确定采用A方案，取土场位置平面示意图如图1所示。施工过程中，路堤填筑两侧均加宽超填30cm。",
        p3: require("../../assets/shi.png"),
        p4:
          "1.计算K1+600~K3+050路段设计填方量的平均运距。(单位: m，计算结果保留到小数点后2位)",
        p5:
          "2．根据《路基施工技术规范》，K1+600~K3+050路段是否需要进行路堤试验路段施工?说明理由。",
        p6: "3．说明施工单位确定采用施工便道A方案的理由。",
        p7:
          "4．路堤填筑时，两侧加宽超填30m的主要作用有哪些?对抛石挤淤的材料还有什么要求?该路段软基处理还可以采用什么方法?",
        p8:
          "5．计算K1+600~-K3+050路段加宽超填土方量，并按《公路工程标准施工招标文件》中工程量计量规则，计算该路段业主需计量支付的路堤填土方量。(单位:m3，计算结果保留到整数)。",
      },
      empty: {
        p1: "1、现代计算机中，通常将计算器和__________集成在一起，称为CPU。",
        p2: "2、计算机中，一个字节是由_________________个二进制位组成。",
        p3: "3、计算机系统的软件可分为系统软件和______________.",
        p4: "4、计算机的工作是按照_________________进行的。",
        p5: "5、计算机是在___________的控制下进行工作的。",
        p6: "6、指令的编码将指令分成操作码和_____________字段。",
      },
      form: {
        one: "",
        two: "",
        three: "",
        four: "",
        five: "",
        six: "",
      },
      easy: {
        p1:
          "1、在考生文件夹中，有一个“Test.rar”压缩文件，其中包括“Test1.jpg”、“Test2.docx”和“Test3.docx”三个文件。请将该压缩文件中的“Test1.jpg”解压到考生文件夹下的Test文件夹中。",
        p2:
          "2、在考生文件夹中，有一个“Test.rar”压缩文件，其中包括“Test1.jpg”、“Test2.docx”和“Test3.docx”三个文件。请将该压缩文件中的“Test1.jpg”解压到考生文件夹下的Test文件夹中。",
      },
      fileList: [],
      crollTopNum: "", //页面滚动的高度
      tabshow: false, //是否进行某种操作
      tabshowtwo: false, //是否进行某种操作
    };
  },
  mounted() {
    // chrome
    document.body.scrollTop = 0;
    // firefox
    document.documentElement.scrollTop = 0;
    // safari
    window.pageYOffset = 0;
    // console.log(this.list.length)
    this.total = this.list.length;
    this.branch = document.getElementsByClassName("back").length;
    window.addEventListener("scroll", this.handleScroll, true);
    this.time = Date.parse(new Date()) + 120 * 60 * 60 * 1000;
    //   alert(Date.parse(new Date()));
    // 开始执行倒计时
    this.countdown();
    // 更换按钮，根据情况选择v-if或v-show
    this.isshow1 = false;
    this.$message({
      type: "success",
      message: "开始答题",
    });
  },
  created() {
    
    // if (localStorage.getItem("store")) {
    //   this.$store.replaceState(
    //     Object.assign(
    //       {},
    //       this.$store.state,
    //       JSON.parse(localStorage.getItem("store"))
    //     )
    //   );
      

    // }

    // // 在页面刷新时将vuex里的信息保存到localStorage里
    // window.addEventListener("beforeunload", () => {
    //    localStorage.setItem("store", JSON.stringify(this.$store.state));
    // });
  },
  methods: {
    handleScroll() {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      this.scrollTopNum = top;
      // console.log(this.scrollTopNum)
      if (this.scrollTopNum > 45 && this.scrollTopNum < 2720) {
        this.tabshowtwo = true;
        // console.log(this.tabshowtwo)
      } else if (this.scrollTopNum > 2020) {
        this.tabshowtwo = false;
        this.tabshow = true;
        // console.log(this.tabshowtwo)
        // console.log(this.tabshow)
      } else {
        this.tabshowtwo = false;
        this.tabshow = false;
      }
    },
    changeInput: function () {
      this.branch = document.getElementsByClassName("back").length;
    },
    countdown() {
      const end = this.time; // 定义结束时间
      // alert(end)
      const now = Date.parse(new Date()); // 获取本地时间
      const msec = end - now; // 定义总共所需的时间
      // 将时间戳进行格式化
      // let hr = parseInt(msec / 1000 / 60 / 60 % 24);
      let min = parseInt(msec / 1000 / 60 / 60);
      //  alert(min)
      let sec = parseInt((msec / 1000) % 60);
      // 倒计时结束时的操作
      const that = this;
      if (this.min == 0 && this.sec == 0) {
        // console.log("时间已经结束，答题完毕");
        // this.hr = 3;
        this.min = 120;
        this.sec = 0;
        this.$router.push("end");
      } else {
        // 如时间未归零则继续在一秒后执行
        // this.hr = hr > 9 ? hr : '0' + hr;
        this.min = min > 9 ? min : "0" + min;
        this.sec = sec > 9 ? sec : "0" + sec;
        setTimeout(that.countdown, 1000);
      }
    },
    open() {
      this.$confirm("即将结束答题, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((action) => {
          // eleUI的确定结束回调函数方法
          if (action === "confirm") {
            // this.hr = 0;
            this.min = 0;
            this.sec = 0;
            // console.log(this.hr + ',' + this.min + ',' + this.sec);
            this.isshow1 = true;
          }
          this.$message({
            type: "success",
            message: "交卷成功!",
          });
          this.$router.push("/End");
        })
        .catch(() => {
          // 点击取消后
          this.$message({
            type: "info",
            message: "已取消交卷",
          });
        });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>
<style lang="scss" scoped>
.back {
  background: #44b6ff !important;
}
li {
  list-style: none;
}
img {
  display: block;
}
.test {
  width: 100%;
  margin: 0 auto;
  .center {
    max-width: 1802px;
    width: 94%;
    margin: 0 auto;
    margin-top: 84px;
    .Bigtitle {
      background: #44b6ff;
      font-size: 30px;
      text-align: center;
      height: 94px;
      line-height: 94px;
      border-radius: 10px;
      color: #fff;
    }
    .content {
      max-width: 1189px;
      margin: 0 auto;
      margin-top: 84px;
      display: flex;
      justify-content: space-between;
      // float: left;
      .left {
        width: 732px;
        // background: lemonchiffon;
        .first {
          border-radius: 13px;
          background: #fff;
          box-shadow: 0px 5px 20px 0px rgba(116, 116, 116, 0.35);
          padding-bottom: 48px;
          > p {
            font-size: 24px;
            color: #999999;
            width: 94%;
            margin: 0 auto;
            padding: 15px 0px;
          }
          > div {
            border-top: 1px solid #d0d0d0;
            .con {
              width: 94%;
              margin: 0 auto;
              margin-top: 46px;
              line-height: 40px;
            }
            .con:first-child {
              .el-radio {
                display: block;
                line-height: 40px;
              }
            }
            .con:nth-child(2) {
              .radio {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 1.5rem;
                padding-left: 53px;

                .el-radio {
                  display: block;
                  line-height: 40px;
                }
              }
            }
          }
        }
        .two {
          border-radius: 13px;
          background: #fff;
          box-shadow: 0px 5px 20px 0px rgba(116, 116, 116, 0.35);
          padding-bottom: 48px;
          margin-top: 30px;
          > p {
            font-size: 24px;
            color: #999999;
            width: 94%;
            margin: 0 auto;
            padding: 15px 0px;
          }
          > div {
            border-top: 1px solid #d0d0d0;
            .con {
              width: 94%;
              margin: 0 auto;
              margin-top: 46px;
              margin-bottom: 10px;
              line-height: 28px;
              p {
                padding: 3px 0px;
              }
              /deep/.el-textarea__inner {
                resize: none;
              }
            }
          }
        }
        .three {
          border-radius: 13px;
          background: #fff;
          box-shadow: 0px 5px 20px 0px rgba(116, 116, 116, 0.35);
          padding-bottom: 48px;
          margin-top: 30px;
          > p {
            font-size: 24px;
            color: #999999;
            width: 94%;
            margin: 0 auto;
            padding: 15px 0px;
          }
          > div {
            border-top: 1px solid #d0d0d0;
            .con {
              width: 94%;
              margin: 0 auto;
              margin-top: 46px;
              margin-bottom: 10px;
              line-height: 28px;
              p {
                padding: 3px 0px;
              }
              .el-form {
                .el-form-item__content {
                  position: relative;
                  span {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    margin: auto 15px;
                    z-index: 12;
                  }
                  .el-input {
                    width: 100%;
                    /deep/ .el-input__inner {
                      text-indent: 1rem;
                    }
                  }
                }
              }
            }
          }
        }
        .four {
          border-radius: 13px;
          background: #fff;
          box-shadow: 0px 5px 20px 0px rgba(116, 116, 116, 0.35);
          padding-bottom: 48px;
          margin-top: 30px;
          > p {
            font-size: 24px;
            color: #999999;
            width: 94%;
            margin: 0 auto;
            padding: 15px 0px;
          }
          > div {
            border-top: 1px solid #d0d0d0;
            .con {
              width: 94%;
              margin: 0 auto;
              margin-top: 46px;
              margin-bottom: 10px;
              line-height: 28px;
              p {
                padding: 3px 0px;
              }
              .upload-demo {
                // background: #44b6ff;
                text-align: right;
                /deep/.el-upload-list--text {
                  text-align: left;
                }
              }
            }
          }
        }
      }
      .right {
        width: 431px;
        background: #fff;
        box-shadow: 0px 5px 20px 0px rgba(116, 116, 116, 0.35);
        border-radius: 10px;
        // position: relative;
        position: fixed;
        bottom: 0;
        left: 60%;
        height: 560px;
        .time {
          padding: 20px 0px;
          border-bottom: 1px solid #e5e5e5;
          p {
            width: 94%;
            margin: 0 auto;
            font-size: 30px;
            color: #ff0000;
            span {
              color: #44b6ff;
            }
          }
        }
        .progress {
          width: 90%;
          margin: 0 auto;
          display: flex;
          justify-content: left;
          margin: 40px 5% 70px 5%;
          span {
            width: 75%;
            height: 25px;
            line-height: 25px;
            display: block;
            background: #e5e5e5;
            text-indent: 3rem;
            border-radius: 20px;
            color: #fff;
          }
        }
        .mu {
          width: 94%;
          margin: 20px auto;
          p {
            color: #44b6ff;
            font-size: 20px;
            margin: 20px 0px;
          }
          ul {
            width: 94%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 1.5rem;

            li {
              width: 30px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              color: #fff;
              background: #999999;
            }
          }
        }
        .style {
          display: flex;
          justify-content: space-around;
          margin: 90px 0px 60px 0px;
          > div {
            width: 20%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            > div {
              width: 30px;
              height: 30px;
            }
            .gref {
              background: #999999;
            }
            .bule {
              background: #44b6ff;
            }
          }
        }
        button {
          // position: absolute;
          bottom: 40px;
          left: 0;
          right: 0;
          width: 80%;
          margin: 0 auto;
          display: block;
          background: #44b6ff;
          border: none;
          border-radius: 10px;
          font-size: 24px;
        }
        .last {
          background: #999999;
          color: #fff;
        }
      }
    }
  }
}
.ture {
  // top: 15% !important;
  bottom: 406px !important;
}
.turetwo {
  // top: 15% !important;
  bottom: 286px !important;
}
</style>